<template>
  <div>
    <a-row>
      <a-col :span="12">
        <div style="margin-bottom:20px">
          <a-button type="primary" @click="showModal">创建数据字典主表</a-button>
        </div>
        <div class="topsearch">
          <div class="left_search">
            <a-input placeholder="请输入编码" style="width: 250px" v-model="dicCode_$_like" allow-clear />
            <a-input
              placeholder="请输入字典值"
              style="width: 250px"
              v-model="dicValue_$_like"
              allow-clear
            />
            <a-button type="primary" slot="action" @click="searchfather">查询</a-button>
            <a-button @click="resetvalue">重置</a-button>
          </div>
        </div>
        <!-- table -->
        <a-table
          :columns="columns"
          rowKey="id"
          :data-source="data"
          bordered
          size="middle"
          :rowClassName="rowClassName"
          :customRow="customRow"
        >
          <template slot="action" slot-scope="text,record">
            <a-button @click="handleEdit(record)">编辑</a-button>
            <a-button type="danger" @click="handleDelete(record)" style="margin-left:10px;">删除</a-button>
          </template>
        </a-table>
      </a-col>
      <a-col :span="11" :offset="1" >
        <!-- v-if="selectedRowKeysArray[0]" -->
        <div style="margin-bottom:20px">
          <a-button type="primary" @click="showModalchild">创建字典子表</a-button>
        </div>
        <a-table
          :columns="columnschild"
          :data-source="datachild"
          bordered
          rowKey="id"
          size="middle"
        >
          <template slot="action" slot-scope="text,record">
            <a-button @click="handleEditchild(record)">编辑</a-button>
            <a-button type="danger" @click="handleDeletechild(record)" style="margin-left:10px;">删除</a-button>
          </template>
        </a-table>
      </a-col>
    </a-row>

    <!--  -->
    <a-modal
      :title="currentRow == 1 ? '创建数据字典主表': '修改数据字典主表'"
      :visible="visible"
      okText="确认"
      cancelText="取消"
      :width="560"
      :confirmLoading="loading"
      @ok="handleOk"
      @cancel="hideModalNo"
    >
      <a-form-model
        :model="writeForm"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        ref="writeForm"
        hideRequiredMark
      >
        <a-form-model-item prop label="字典编码">
          <a-input v-model="writeForm.dicCode" placeholder="请输入字典编码" />
        </a-form-model-item>
        <a-form-model-item prop label="字典值">
          <a-input v-model="writeForm.dicValue" placeholder="请输入类型" />
        </a-form-model-item>
        <a-form-model-item prop label="字典描述">
          <a-input v-model="writeForm.dicDesc" placeholder="请输入描述" />
        </a-form-model-item>
        <a-form-model-item prop label="类型">
          <a-select v-model="writeForm.dicType" placeholder="请选择类型">
            <a-select-option value="0">0</a-select-option>
            <a-select-option value="1">1</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 创建儿子 -->
    <a-modal
      :title="currentRowchild == 1 ? '创建数据字典子表': '修改数据字典子表'"
      :visible="visiblechild"
      okText="确认"
      cancelText="取消"
      :width="560"
      :confirmLoading="loadingchild"
      @ok="handleOkchild"
      @cancel="hideModalNochild"
    >
      <a-form-model
        :model="writeFormchild"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        ref="writeFormchild"
        hideRequiredMark
      >
        <a-form-model-item prop label="字典编码">
          <a-input v-model="writeFormchild.code" placeholder="请输入字典编码" />
        </a-form-model-item>
        <a-form-model-item prop label="字典值">
          <a-input v-model="writeFormchild.value" placeholder="请输入类型" />
        </a-form-model-item>
        <a-form-model-item prop label="字典描述">
          <a-input v-model="writeFormchild.dicDesc" placeholder="请输入描述" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRows: "",
      selectedRowKeysArray: [],
      currentRowchild: 1,
      visiblechild: false,
      loadingchild: false,
      writeFormchild: {}, //子集
      fatherid: "",
      pagination: {
        total: 0,
        current: 1,
        pageSize: 5
      },
      dicCode_$_like: "",
      dicValue_$_like: "",
      datachild: [],
      data: [],
      columnschild: [
        {
          title: "字典类型编码",
          dataIndex: "code"
        },
        {
          title: "类型值",
          dataIndex: "value"
        },
        {
          title: "类型描述",
          dataIndex: "dicDesc"
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" }
        }
      ],
      columns: [
        {
          title: "字典类型编码",
          dataIndex: "dicCode"
        },
        {
          title: "类型值",
          dataIndex: "dicValue"
        },
        {
          title: "类型描述",
          dataIndex: "dicDesc"
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" }
        }
      ],
      writeForm: {}, //父级
      loading: false,
      visible: false,
      currentRow: 1,
      writeid: "",
      isWriteidChild: "",
      tableCurrRowId:''
    };
  },
  mounted() {
    this.queryfaterdata();
  },
  computed: {
    // rowSelection() {
    //   return {
    //     type: "radio",
    //     onChange: (selectedRowKeys, selectedRows) => {
    //       this.selectedRowKeysArray = selectedRowKeys;
    //       this.selectedRows = selectedRows;
    //       const isdata = {
    //         typeId: selectedRowKeys[0]
    //       };
    //       this.$axios.post("/dic/service/findByPage", isdata).then(res => {
    //         console.log(res);
    //         if (res.code == 200) {
    //           this.datachild = res.data;
    //         }
    //       });
    //     }
    //   };
    // }
  },
  methods: {
    customRow (record, index) {
      return {
        on: {
          click: () => {
            this.tableCurrRowId = record.id
            console.log('点击了table行，id为-----', this.tableCurrRowId)
            this.selectedRowKeysArray=[record.id]
            
          }
        }
      }
    },
    rowClassName (record, index) {
      return (record.id === this.tableCurrRowId) ? 'blue' : 'white'
    },
    queryfaterdata() {
      //初始加载函数
      this.$axios.post("/dic/service/findByTypePage", {}).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.data = res.data.queryResult;
        }
      });
    },
    showModal() {
      //父亲新增
      this.visible = true;
      this.writeForm = {};
      this.currentRow = 1;
    },
    handleOk() {
      if ((this.currentRow = 1)) {
        let data = {
          dicCode: this.writeForm.dicCode,
          dicDesc: this.writeForm.dicDesc,
          dicType: this.writeForm.dicType,
          dicValue: this.writeForm.dicValue
        };
        this.$axios.post("/dic/service/createType", data).then(res => {
          if (res.code == 200) {
            this.visible = false;
            this.queryfaterdata();
          }
        });
      }
      if ((this.currentRow = 2)) {
        let data = {
          dicCode: this.writeForm.dicCode,
          dicDesc: this.writeForm.dicDesc,
          dicType: this.writeForm.dicType,
          dicValue: this.writeForm.dicValue,
          id: this.writeForm.id
        };
        this.$axios.post("/dic/service/editType", data).then(res => {
          if (res.code == 200) {
            this.visible = false;
            this.queryfaterdata();
          }
        });
      }
    },
    hideModalNo() {
      this.visible = false;
    },
    handleDelete(value) {
      //删除
      console.log(value);
      var that = this;
      this.$confirm({
        title: "删除提示",
        content: "你确定要删除整个主表吗? 删除后数据将无法恢复",
        onOk: async () => {
          that.$axios
            .post("/dic/service/deleteByTypeIds", { id: value.id })
            .then(res => {
              if (res.code == 200) {
                that.$message.success(res.msg);
                that.queryfaterdata();
              }
            });
        },
        onCancel() {}
      });
    },
    showModalchild() {
      //点击创建儿子
      if (this.selectedRowKeysArray.length < 1) {
        this.$error({
          title: "温馨提示",
          content: "请选择左侧数据，方可添加子表！"
        });
        return;
      }
      this.visiblechild = true;
      this.currentRowchild = 1;
      this.writeFormchild = {};
    },
    searchfather() {
      let data = {};
      if (this.dicValue_$_like != "") {
        data["dicValue"] = this.dicValue_$_like;
      }
      if (this.dicCode_$_like != "") {
        data["dicCode"] = this.dicCode_$_like;
      }
      //父查询
      this.$axios.post("/dic/service/findByTypePage", data).then(res => {
        if (res.code == 200) {
          this.data = res.data.queryResult;
        }
      });
    },
    handleEdit(record) {
      //点击编辑父级
      this.visible = true;
      this.currentRow = 2;
      this.writeForm = {
        dicCode: record.dicCode,
        dicDesc: record.dicDesc,
        dicType: record.dicType.toString(),
        dicValue: record.dicValue,
        id: record.id
      };
    },
    handleEditchild(record) {
      //编辑子表
      console.log(record);
      this.visiblechild = true;
      this.currentRowchild = 2;
      this.writeFormchild = {
        code: record.code,
        value: record.value,
        dicDesc: record.dicDesc,
        id: record.id
      };
    },
    handleDeletechild(value) {
      //删除子表
      var that = this;
      this.$confirm({
        title: "删除提示",
        content: "你确定要该条子表吗? 删除后数据将无法恢复",
        onOk: async () => {
          that.$axios
            .post("/dic/service/deleteByDicIds", { id: value.id })
            .then(res => {
              if (res.code == 200) {
                that.$message.success(res.msg);
                let updatadata = { typeId: that.selectedRowKeysArray[0] };
                that.$axios
                  .post("/dic/service/findByPage", updatadata)
                  .then(res => {
                    console.log(res);
                    if (res.code == 200) {
                      that.datachild = res.data;
                    }
                  });
              }
            });
        },
        onCancel() {}
      });
    },
    handleOkchild() {
      //儿子确定
      if (this.currentRowchild = 1) {
        let data = {
          code: this.writeFormchild.code,
          dicDesc: this.writeFormchild.dicDesc,
          typeId: this.selectedRowKeysArray[0],
          value: this.writeFormchild.value
        };
        this.$axios.post("/dic/service/createDic", data).then(res => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.visiblechild = false;
            var that = this;
            let updatadata = { typeId: that.selectedRowKeysArray[0] };
            that.$axios
              .post("/dic/service/findByPage", updatadata)
              .then(res => {
                console.log(res);
                if (res.code == 200) {
                  that.datachild = res.data;
                }
              });
          }
        });
      }
      if (this.currentRowchild = 2) {
        let data = {
          code: this.writeFormchild.code,
          dicDesc: this.writeFormchild.dicDesc,
          typeId: this.selectedRowKeysArray[0],
          value: this.writeFormchild.value,
          id: this.writeFormchild.id
        };
        this.$axios.post("/dic/service/editDic", data).then(res => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.visiblechild = false;
            var that = this;
            let updatadata = { typeId: that.selectedRowKeysArray[0] };
            that.$axios
              .post("/dic/service/findByPage", updatadata)
              .then(res => {
                if (res.code == 200) {
                  that.datachild = res.data;
                }
              });
          }
        });
      }
    },
    hideModalNochild() {
      this.visiblechild = false;
    },
    resetvalue() {
      //重置
      this.dicCode_$_like = "";
      this.dicValue_$_like = "";
      this.queryfaterdata();
    }
  }
};
</script>
<style lang="scss" scoped>
.topsearch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  .left_search {
    .ant-input-affix-wrapper {
      margin-right: 14px;
    }
    .ant-btn {
      margin-right: 14px;
    }
  }
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
::v-deep .ant-table-tbody .white{
    background-color: white !important;
  }
 ::v-deep .ant-table-tbody .blue{
    background-color: #bae7ff !important;
  }
 ::v-deep .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
  //自定义table行hover上去的背景颜色
    background: #bae7ff;
    cursor: default;
  }

</style>